<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Test Portal</title>
  <link rel="stylesheet" href="stylesheets/page.css" type="text/css" media="screen" charset="utf-8" />
  <link rel="stylesheet" href="stylesheets/default.css" type="text/css" media="screen" charset="utf-8" />
  <script type="text/javascript" src="lib/prototype.js"></script> 
  <script type="text/javascript" src="lib/effects.js"></script> 
  <script type="text/javascript" src="lib/builder.js"></script> 
  <script type="text/javascript" src="lib/dragdrop.js"></script> 
  <script type="text/javascript" src="lib/portal.js"></script>  
</head>
<body>      
  <h1>My test page</h1>
  <div id="page">
      <div id="widget_col_0"></div>
      <div id="widget_col_1"></div>
      <div id="widget_col_2"></div>
 </div>    
 <div id="control_buttons" style="display:none">
   <a href="#" id="edit_button"></a>
   <a href="#" onclick="removeWidget(this); return false;" id="delete_button"></a>
 </div>

  <script type="text/javascript">
     var portal;     
     var latin1 = "Incident notifications will go here <br>"+
     "sdfsdfsdf<br>"+
     "sdfsdf<br>"+
     "sdfsdfsd<br>"+
     "sdfsfs<br>"+
     "sfsdfsdf<br>"+
     "sfsdfsd<br>"+
     "sdfsdf<br>"+
     "sdfsdfsd<br>"+
     "sdfsfs<br>"+
     "sfsdfsdf<br>"+
     "sfsdfsd<br>"+
     "sdfsdfsdf";
     var latin2 = "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ";
     var latin3 = "<h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</h3> ";
      
     function onOverWidget(portal, widget) {
       widget.getElement().insertBefore($('control_buttons'), widget.getElement().firstChild);
       $('control_buttons').show(); 
     } 
   
     function onOutWidget(portal, widget) {
       $('control_buttons').hide();      
     } 
   
     function removeWidget(element) {
       var widget = $(element).up(".widget").widget;
     
       if (confirm('Are sure to remove this widget?')) { 
         document.body.appendChild($('control_buttons').hide());
         portal.remove(widget);
       }
     }                                
                                                                                                                                                           
    function onChange() {
      
    }
     function init() {             
       portal = new Xilinus.Portal("#page div", {onOverWidget: onOverWidget, onOutWidget: onOutWidget, onChange: onChange, removeEffect: Effect.SwitchOff}); 
       // Fake widgets
       portal.add(new Xilinus.Widget().setTitle("Incidents").setContent(latin1), 0);
       portal.add(new Xilinus.Widget().setTitle("Defects").setContent(latin2), 0);
       portal.add(new Xilinus.Widget().setTitle("Notifications").setContent(latin3), 0);
       portal.add(new Xilinus.Widget().setTitle("Notifications1").setContent(latin3), 0);
       portal.add(new Xilinus.Widget().setTitle("Notifications2").setContent(latin3), 0);
       portal.add(new Xilinus.Widget().setTitle("Notifications3").setContent(latin3), 0);
       portal.add(new Xilinus.Widget().setTitle("Notifications4").setContent(latin3), 0);
       portal.add(new Xilinus.Widget().setTitle("Notifications5").setContent(latin3), 0);
           
       portal.add(new Xilinus.Widget().setTitle("Test status").setContent(latin2 + latin3), 1);
       portal.add(new Xilinus.Widget().setTitle("Events").setContent(latin3), 1);      
     
       portal.add(new Xilinus.Widget().setTitle("Environment status").setContent(latin1 + latin2 + latin3), 2);
       
       // Add controls buttons
       portal.addWidgetControls("control_buttons");
     }
     Event.observe(window, "load", init);
  </script>
</body>
</html>
